<template>
    <NewCard title="" :isright="true">
        <template slot="right">
            <el-button type="text" class="handleBtn" @click="stepClick">操作</el-button>
        </template>
        <!-- 流程步骤 -->
        <div class="conditionsTxt stepbox">
            <h3>
                <p>编号</p>
                <p>事项</p>
                <p>收比(%)</p>
                <p>作业天数</p>
            </h3>
            <el-collapse v-model="activeStep">
              <el-collapse-item :title="st.group" :name="index" v-for="(st,index) in step" :key="index">
                  <ul>
                    <li v-for="(cont,index) in st.children" :key="index">
                        <i>{{cont.no > 9 ? cont.no : "0" + cont.no}}</i>
                        <p class="isLight">{{cont.name}}</p>
                        <p>{{cont.scale==''?'--':cont.scale}}</p>
                        <p>{{cont.workday}}</p>
                    </li>
                  </ul>
              </el-collapse-item>
            </el-collapse>

            <SubBtn>
              <template slot="btn">
                <el-button round @click="copyBtn">复制流程</el-button>
                <el-button round @click="stickupBtn">粘贴流程</el-button>
              </template>
            </SubBtn>
        </div>
        <!-- 流程步骤编辑步骤 -->
        <el-drawer
            title="编辑步骤"
            size="40%"
            @close='stepClose'
            :visible.sync="stepDrawer">
            <div class="conditionsTxt pd20 drawerBox stepDrawer">
            <h3>
                <p>删除</p>
                <p>编号</p>
                <p>事项</p>
                <p>收比(%)</p>
                <p>作业天数</p>
            </h3>
            <div class="mb60">
              <el-tree
                :allow-drop="canDrag"
                @node-drop="handleDrop"
                :data="step"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                draggable>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <!-- {{data}} -->
                  <i
                    class="el-icon-remove"
                    v-if="data.isPid"
                    @click="removeBzgroup(data)"
                    v-hasPermi="['work:projectFlow:remove']"
                  ></i>
                  <i class="el-icon-remove" v-else @click="removeBzList(data)"></i>
                  <p class="treeNum" v-if="!data.isPid">
                    {{ data.no > 9 ? data.no : "0" + data.no }}
                  </p>
                  <el-input v-model="data.group" v-if="data.isPid" @input="editGroupInput(data)" class="groupInput"></el-input>
                  <el-input v-model="data.name" v-if="!data.isPid" @input="editInput(data)"></el-input>
                  <el-input v-model.number="data.scale" v-if="!data.isPid" @input="editInput(data)"></el-input>
                  <el-input v-model.number="data.workday" v-if="!data.isPid" @input="editInput(data)"></el-input>
                  
                  <!-- 添加图标 -->
                  <p class="drawerAdd" v-if="data.isPid">
                    <svg-icon icon-class="add-icon" @click="addBzList(data)" v-hasPermi="['work:projectFlow:add']"/>
                  </p>
                </span>
              </el-tree>

            </div>
            <SubBtn v-hasPermi="['work:projectFlow:edit']">
                <template slot="btn">
                <el-button round @click="addBzGroup">添加流程组</el-button>
                <el-button type="primary" round @click="saveBtn" :disabled="!isCheck">保存</el-button>
                </template>
            </SubBtn>
            </div>
        </el-drawer>

        <!-- ******************流程步骤的材料收集抽屉****************** -->
        <el-drawer
          :title="`第${getChNum}步 - ${editStuffName}`"
          size="85%"
          :visible.sync="editStuffShow">
          <Stepdrawer :cascaderValue="cascaderValue"></Stepdrawer>
        </el-drawer>
        <!-- ******************流程步骤的材料收集抽屉 end****************** -->
    </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
import Stepdrawer from "./stepdrawer.vue";

import {switchTree,TurnChinese} from "@/wss/utils/wss.js";
import {
  getProjectFlowListApi,
  addProjectFlowApi,
  editProjectFlowApi,
  removeProjectFlowApi
} from "@/wss/newApi_3-24/work/projectFlow.js"
import debounce from "lodash/debounce";
export default {
    components:{NewCard,SubBtn,Stepdrawer},
    props:{
      cascaderValue:{
        type: Array,
      },
      copyData:{
        type: Array,
      },
    },
    data(){
      return{
        //当前激活的项目步骤
        activeStep: [],
        // 编辑项目步骤抽屉
        stepDrawer:false,
        saveClose: false,//判断当前的抽屉是点保存关闭还是普通关闭
        isSend: false,//点击保存时判断当前的输入的是正确的数据
        
        temArray:[],//暂存的数组 
        // 项目步骤数据
        step:[],

        typeId:'',//项目类型id
        //当前删除的id组
        removeId:[],
        //当前添加的条件
        addTj:[],
        //修改项目条件
        editTj:[],

        isCheck: true,// 判断当前点击保存是否已经返回请求

        // ****************流程步骤*********************
        editStuffShow:false,//流程步骤的材料收集抽屉显示隐藏
        editStuffName:'',//当前选中的材料收集名称
        editStuffNo:'',//当前选中材料的序号no
      }
    },
    watch:{
      cascaderValue(newValue,oldValue){
        this.getProjectFlowList() //获取项目步骤
      },
    },
    async mounted(){
      await this.getProjectFlowList() //获取项目步骤

      // 默认展开所有折叠面板 activeStep
      this.activeStep = []
      this.step.forEach((item,i)=>{
        this.activeStep.push(i)
      })
    },
    methods:{
      // 拖拽时判定目标节点能否被放置
      canDrag(draggingNode, dropNode, type) {

        if (draggingNode.level == '1') {
          return false
        } else {
          if(draggingNode.level==dropNode.level){
            //组中只剩一个的时候不能拖拽
            if(draggingNode.parent.data.children.length==1){
              return false
            }else{
              return type==="prev" || type==="next"
            }
            //组中只剩一个的时候不能拖拽 end
          }else if(draggingNode.level==dropNode.level+1){
            return type==='inner'
          }else{
            return false
          }
        }

      },

      //获取项目步骤列表
      async getProjectFlowList(){
        this.typeId = this.cascaderValue[this.cascaderValue.length - 1]
        let typeId = this.cascaderValue[this.cascaderValue.length - 1]
        if(!typeId) return
        let result = await getProjectFlowListApi({typeId})
        if(result.code==200){
          //根据no字段排序
          let arr = result.rows.sort((a, b) => Number(a.no)- Number(b.no))
          // console.log(arr);
          this.step = switchTree(arr)

          // 默认展开所有折叠面板 activeStep
          this.activeStep = []
          this.step.forEach((item,i)=>{
            this.activeStep.push(i)
          })
        }
      },

      //拖拽成功完成时的事件 draggingNode拖拽节点 dropNode进入的节点 dropType放置位置 ev是event
      handleDrop(draggingNode, dropNode, dropType, ev) {
        //修改拖拽后的group为目标节点的group
        draggingNode.data.group = dropNode.data.group

        // //判断修改的数据是否有重复的，删除重复的
        // this.editTj.forEach(item=>{
        //   // 获得下标
        //   let index = this.editTj.indexOf(item);
        //   if(item.id == draggingNode.data.id){
        //     // 根据下标去删数据
        //     this.editTj.splice(index,1)
        //   }
        // })
        // //获取修改后的项目条件
        // this.editTj.push(draggingNode.data)

        // 拖拽之后的数字no要改变 ************************
        let newStep = []
        //把所有子项转成一整个数组
        this.step.forEach(item=>{
          newStep = [...newStep,...item.children]
        })
        //把下标+1重新赋值给所有子项no
        for(let i=0;i<newStep.length;i++){
          newStep[i].no = (i+1)
        }
        // 把全部子项给到修改组里面
        newStep.forEach(item=>{
          // 有id才加进去
          if(item.id){
            this.editTj.push(item)
          }
        })
        // 拖拽之后的数字no要改变 ************************end

      },

      //修改组的组名的时候，下面的子元素都要把组名改了
      editGroupInput(data){
        data.children.forEach((item)=>{
          item.group = data.group
        })
        // 去掉重复的
        data.children.map(item=>{ 
          this.editTj = this.editTj.filter(item2 => {
            return item2.id != item.id
          });
        })
        //把当前修改的添加到修改数据里面
        this.editTj = [...this.editTj,...data.children]
      },

      //修改input框的时候
      editInput(data){
        //判断修改的数据是否有重复的，删除重复的
        this.editTj.forEach(item=>{
          // 获得下标
          let index = this.editTj.indexOf(item);
          if(item.id == data.id){
            // 根据下标去删数据
            this.editTj.splice(index,1)
          }
        })
        //刚刚添加进去条件的不能当做修改的加入到修改组里面 通过createBy判断是否是刚刚加进去的
        if(data.createBy){
          //把当前修改的添加到修改数据里面
          this.editTj.push(data)
        }
      },

      // *****************流程步骤*****************
      //点击流程步骤的操作
      stepClick(){
        this.saveClose = false //改成普通关闭状态
        this.isSend = false //点击保存时判断当前的输入的是正确的数据
        this.stepDrawer=true//显示流程步骤的抽屉
        // 把数组先保存起来,关闭抽屉和取消的时候还原旧数据
        this.temArray =  JSON.parse(JSON.stringify(this.step))
      },

      // 关闭流程步骤的回调
      stepClose(){
        // 还原旧数据 普通关闭执行还原数据
        if(this.saveClose == false){
          this.step = this.temArray;
        }
        //清空删除、添加、修改的数据
        this.removeId=[]//当前删除的数据
        this.addTj=[]//当前添加的数据
        this.editTj=[]//修改项目的数据
      },

      //删除步骤的其中一组
      removeBzgroup(group){
        let step = this.step;
        if(group.id){
          // 当删除的这一条是有id的说明是已经添加的
          step = step.filter((item) => {
            return item.group != group.group;
          });
          this.step = step;
        }else{
          // 当删除的这一条是没有id的说明是新添加的
          step.forEach((i) => {
            let index = step.indexOf(group)
            if(i == group){
              step.splice(index,1)
            }
          })
        }

        //获得当前删除组下的所有的id
        group.children.forEach(i=>{
          this.removeId.push(i.id)
        })

        //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
        this.addTj.forEach(item=>{
          // 获得下标
          let index = this.addTj.indexOf(item);
          if(item == group){
            this.addTj.splice(index,1)
          }
        })

        // 添加之后的数字no要改变 ************************
        let newStep = []
        //把所有子项转成一整个数组
        this.step.forEach(item=>{
          newStep = [...newStep,...item.children]
        })
        //把下标+1重新赋值给所有子项no
        for(let i=0;i<newStep.length;i++){
          newStep[i].no = (i+1)
        }
        // 把全部子项给到修改组里面
        newStep.forEach(item=>{
          // 有id才加进去
          if(item.id){
            this.editTj.push(item)
          }
        })
        // 添加之后的数字no要改变 ************************end
      },
        
      // 删除步骤的其中一条
      removeBzList(list){
        let step = this.step;
        if(list.id){
          // 当删除的这一条是有id的说明是已经添加的
          step.forEach((i) => {
            i.children = i.children.filter((k) => {
              return k.id != list.id;
            });
          });
          this.step = step;
        }else{
          // 当删除的这一条是没有id的说明是新添加的
          step.forEach((i) => {
            i.children.forEach((k)=>{
              // 获得下标
              let index = i.children.indexOf(list)
              if(k == list){
                i.children.splice(index,1)
              }
            })
          })
        }

        //获得当前删除的id
        this.removeId.push(list.id)
        //删除刚刚添加的一条的时候，把添加数据里面的那一条删掉
        this.addTj.forEach(item=>{
          // 获得下标
          let index = this.addTj.indexOf(item);
          if(item == list){
            this.addTj.splice(index,1)
          }
        })

        // 添加之后的数字no要改变 ************************
        let newStep = []
        //把所有子项转成一整个数组
        this.step.forEach(item=>{
          newStep = [...newStep,...item.children]
        })
        //把下标+1重新赋值给所有子项no
        for(let i=0;i<newStep.length;i++){
          newStep[i].no = (i+1)
        }
        // 把全部子项给到修改组里面
        newStep.forEach(item=>{
          // 有id才加进去
          if(item.id){
            this.editTj.push(item)
          }
        })
        // 添加之后的数字no要改变 ************************end
      },

      //添加一条数据
      addBzList(data){
        //把数据里的no提取出来
        let noList = [];
        this.step.forEach((item) => {
          if (item.no) {
            noList.push(parseInt(item.no));
          }
          if (item.children.length > 0) {
            item.children.forEach((c) => {
              if (c.no) {
                noList.push(parseInt(c.no));
              }
            });
          }
        });
        //获得最大的no 然后+1
        let maxNum = (parseInt(Math.max(...noList)) || 0) + 1;

        //添加一条数据
        data.children.push({
          group: data.group,
          name:"",
          scale: "",
          workday:"",
          no: maxNum.toString(),
          typeId: this.typeId,  
        });

        //获得当前添加的这一个条件
        this.addTj.push(data.children[data.children.length-1])

        // 添加之后的数字no要改变 ************************
        let newStep = []
        //把所有子项转成一整个数组
        this.step.forEach(item=>{
          newStep = [...newStep,...item.children]
        })
        //把下标+1重新赋值给所有子项no
        for(let i=0;i<newStep.length;i++){
          newStep[i].no = (i+1)
        }
        // 把全部子项给到修改组里面
        newStep.forEach(item=>{
          // 有id才加进去
          if(item.id){
            this.editTj.push(item)
          }
        })
        // 添加之后的数字no要改变 ************************end
      },

      //添加一组数据
      addBzGroup(){
        this.step.push({
          children:[],
          group: "",
          isPid: true,
          typeId: this.typeId, 
        });

        //获得当前添加的这一个组
        // this.addTj.push(this.step[this.step.length-1])
      },

      // *****************流程步骤*****************end

      // 点击保存按钮 ***************
      saveBtn: debounce(function() {
        //判断点击保存时的数据是否是正常的数据
        try {
          // 判断收比加起来等于100%才能保存
          let arr = []
          let scaleTo = 0
          this.step.forEach(item=>{
            arr = [...arr,...item.children]
          })
          arr.forEach(item=>{
            if(item.scale){
              scaleTo = scaleTo + Number(item.scale)
            }
          })
          if(scaleTo != 100){
            this.$message({
              type: "warning",
              message: "步骤流程收比相加需要等于100%！",
            });
            return
          }
          // 判断收比加起来等于100%才能保存 end

          //当把数据全部删除的情况
          if (this.step.length == 0) {
            // 条件改成通过
            this.isSend = true;
          }

          this.step.forEach((item) => {
            if (item.children.length < 1) {
              this.$message({
                type: "warning",
                message: "组下面至少要有一个条件！",
              });
              throw new Error("组下面至少要有一个条件！");
            } else {
              if (item.isPid == true && item.group == "") {
                this.$message({ type: "warning", message: "组名不能为空" });
                throw new Error("组名不能为空");
              } else {
                item.children.forEach((c) => {
                  if (c.name == "" || c.workday == "") {
                    this.$message({ type: "warning", message: "事项或者作业天数不能为空" });
                    throw new Error("事项或者作业天数不能为空");
                  }
                });
                // 条件改成通过
                this.isSend = true;
              }
            }
          });
        } catch (e) {
          throw e.message
        };
        this.startRequest()// 发起 删除、添加、修改
      
      },1000),
      // 点击保存按钮 ***************end

      //如果条件是通过就要去发请求 ********************************
      async startRequest(){
        this.isCheck = false //先不给点击保存
        // 发起 删除、添加、修改
        if (this.isSend == true) {
          this.$message({ type: "success", message: "正在编辑，请稍等！" });
          //判断添加条件是否有数据 有数据就发添加的请求
          if(this.addTj.length > 0){
            // 过滤删除children字段和isPid字段
            this.addTj.forEach(item=>{
              delete item.children
              delete item.isPid
            })
            // 发添加请求
            await this.addProjectFlow(this.addTj)
            this.addTj = []
          }
          //判断添加条件的id组是否有数据 end
          
          //判断修改条件是否有数据 有数据就发添加的请求
          if(this.editTj.length > 0){
            // 过滤删除children字段和isPid字段
            this.editTj.forEach(item=>{
              if(item.scale == ''){
                item.scale = 0
              }
              delete item.children
              delete item.isPid
            })
            // 把没有id的去掉
            let arr = this.editTj.filter(item=>{
              if(item.id){
                return item
              }
            })
            // 发修改请求
            await this.editProjectFlow(arr)
            this.editTj = []
          }
          //判断修改条件的组是否有数据 end

          //判断删除的id组是否有数据 有数据就发删除的请求
          if(this.removeId.length > 0){
            this.removeId.forEach(async id=>{
              // 发删除请求
              if(id){
                await this.removeProjectFlow(id)
                this.removeId = []
              }
            })
          }
          //判断删除的id组是否有数据 end

          setTimeout(async ()=>{
            await this.getProjectFlowList(); //获取项目步骤
            this.saveClose = true //改成保存关闭状态
            this.stepDrawer = false// 关闭抽屉
            this.isCheck = true //可以点击保存
          },100)
        }
      },
      //如果条件是通过就要去发请求 ********************************end
      
      // 请求接口*****************
      async addProjectFlow(data){
        let result = await addProjectFlowApi(data)
        if(result.code != 200) return
      },
      async editProjectFlow(data){
        let result = await editProjectFlowApi(data)
        if(result.code != 200) return
      },
      async removeProjectFlow(id){
        let result = await removeProjectFlowApi(id)
        if(result.code != 200) return
      },
      // 请求接口*****************end

      //点击流程步骤的某一个事项
      editStuff(cont){
        // console.log(cont);
        this.editStuffName = cont.name//当前选中的材料收集名称
        this.editStuffNo = cont.no//当前选中材料的序号no
        this.editStuffShow=true
      },

      // ****************复制粘贴******************
      // 点击复制按钮
      copyBtn(){
        this.$bus.$emit('clickCopyBtn',this.step)
      },
      // 点击粘贴流程
      async stickupBtn(){
        if(this.copyData.length>0){
          // 删除 -------------------------
          let newStep = []
          //把所有子项转成一整个数组
          this.step.forEach(item=>{
            newStep = [...newStep,...item.children]
          })
          this.removeId = []//把之前删除组的清掉
          // 把之前的步骤删除，放到删除组里
          newStep.forEach(item=>{
            this.removeId.push(item.id)
          })
          // 删除 end -------------------------

          this.step = []//清空之前的步骤
          this.step = this.copyData //把复制的流程粘贴进来
          // 默认展开所有折叠面板 activeStep
          this.activeStep = []
          this.step.forEach((item,i)=>{
            this.activeStep.push(i)
          })
          this.addTj = []//把之前添加组的清掉
          // 把步骤放到添加组里面
          this.step.forEach(item=>{
            item.children.forEach(i=>{
              delete i.createBy
              delete i.createTime
              delete i.id
              delete i.updateBy
              delete i.updateTime
              i.typeId = this.typeId
              this.addTj.push(i)
            })
          })
          await this.saveBtn()// 走保存方法
          this.$message({message: '粘贴成功',type: 'success'});
        }else{
          this.$message({message: '请复制流程！',type: 'warning'});
        }
      },
      // ****************复制粘贴 end******************
    },

    computed:{
      // 点击流程步骤的某一个事项 计算当前步骤的中文汉字
      getChNum(){
        return TurnChinese(this.editStuffNo)
      },
    }
}
</script>

<style scoped>
ul,h1,h3,h4,p{
    margin: 0;
    padding: 0;
    list-style: none;
}
.pd20{
  padding: 0 20px;
}
.mb60{
  margin-bottom: 60px;
}
::v-deep .el-card__body{
  height: 100%;
}
::v-deep .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body>div::-webkit-scrollbar{
  width: 0;
}

.projectMate{
  height: 100%;
}
.projectMate .el-card{
  position: relative;
}

/* 抽屉样式 */ 
.conditionsTxt.drawerBox h3{
  margin-top: 0;
}
::v-deep .mateEdit .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .mateEdit .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

.conditionsTxt.drawerBox h3>p:nth-child(1),
.conditionsTxt.drawerBox h3>p:nth-child(2){
  width:8%;
}
.conditionsTxt.drawerBox h3>p:nth-child(2){
  text-align: center;
}

/* 需求 */
.demandDrawer.conditionsTxt h3>p:nth-child(3){
  width: 40%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  margin-right: 3%;
}
.demandDrawer.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 40%;
}

/* 步骤 */
.stepDrawer.conditionsTxt h3>p:nth-child(3){
  width: 51%;
}
.stepDrawer.conditionsTxt h3>p:nth-child(4){
  width: 19%;
}
.stepDrawer.conditionsTxt h3>p:nth-child(5){
  flex: 1;
}

.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(3){
  width: 45%;
  margin-right: 5%;
}
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(4),
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(5){
  width: 15%;
}
.stepDrawer.conditionsTxt .drawerEdit ul>li>.el-input:nth-child(5){
  margin-left: 4%;
}
/* 抽屉样式 end*/ 


.drawerEdit h4{
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.drawerEdit i.el-icon-remove{
  width: 8%;
  color: #909AAA;
  font-size: 14px;
  cursor: pointer;
}

.conditionsTxt .drawerEdit ul>li{
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 0;
}
.conditionsTxt .drawerEdit ul>li>p{
  width: 8%;
  text-align: center;
}
.conditionsTxt .drawerEdit ul>li>.el-input{
  width: 84%;
}
.drawerEdit .drawerAdd{
  padding: 15px 0;
  border-top: 1px solid #EBEEF5;
  border-bottom: 1px solid #EBEEF5;
}
.drawerEdit .drawerAdd i{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 12.5px;
  height: 12.5px;
  border: 1px solid #909AAA;
  color: #909AAA;
  margin-left: 11%;
  cursor: pointer;
}

/* 表格数据 */
.mateEdit{
  height: 90%;
}
.mateEdit .el-row{
  height: 100%;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}

/* 操作按钮 */
.handleBtn{
  color: #F87A23;
  font-size: 12px;
}

/* 项目条件 */
.conditionsTxt {
  margin-bottom: 60px;
}
.conditionsTxt h3{
  display: flex;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
  margin-top: 10px;
}
.conditionsTxt h3>p:first-child{
  width: 12%;
}
.conditionsTxt h3>p:nth-child(2){
  width: 88%;
}

::v-deep .conditionsTxt .el-collapse-item__header,
::v-deep .conditionsTxt .el-collapse-item__header.focusing{
  font-size: 14px;
  font-weight: 600;
  color: #2E3F5E;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
}
::v-deep .conditionsTxt .el-collapse-item__content{
  padding-bottom: 0;
}
::v-deep .conditionsTxt .el-icon-arrow-right:before{
  content: "\E790";
}
::v-deep .conditionsTxt .el-collapse-item__arrow.is-active{
  transform: rotate(180deg);
}

.conditionsTxt ul>li{
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #EBEEF5;
  color: #2E3F5E;
}
.conditionsTxt ul>li i{
  display: block;
  width: 12%;
  font-style: normal;
}
.conditionsTxt ul>li p{
  width: 88%;
}
.conditionsTxt ul>li:last-child{
  border-bottom: 0;
}

/* 项目需求 */
.demandbox h3>p:nth-child(2),
.demandbox h3>p:nth-child(3){
  width: 44%;
}

.demandbox ul>li p{
  width: 44%;
}

/* 流程步骤 */
.stepbox h3>p:nth-child(2){
  width: 50%;
}
.stepbox h3>p:nth-child(3){
  width: 22%;
}
.stepbox h3>p:nth-child(4){
  margin-left: auto;
}

.stepbox ul>li p.isLight{
  width: 50%;
  /* color: #F87A23;
  cursor: pointer; */
}
.stepbox ul>li p:nth-child(3){
  width: 28%;
}
.stepbox ul>li p:nth-child(4){
  width: 10%;
}


/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px;
}
::v-deep .subBtn .el-button{
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606E84;
}
::v-deep .subBtn .el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
::v-deep .subBtn .el-button--primary:hover{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
/* 流程步骤的材料收集********************end */
</style>

<style scoped>
/* 树状结构样式 */
.el-tree >>> .el-tree-node {
  position: relative;
}
.el-tree >>> .el-tree-node__expand-icon {
  display: none;
}
.el-tree >>> .el-tree-node__content {
  width: 100%;
  height: auto;
  padding-left: 0 !important;
}
.el-tree .custom-tree-node {
  width: 100%;
  margin: 4px 0;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #f5f7fa;
  cursor: move!important;
}
.el-tree .el-icon-remove {
  width: 8%;
  color: #909aaa;
  cursor: pointer;
}
.el-tree .treeNum {
  width: 8%;
  text-align: center;
  font-size: 14px;
}
.el-tree .el-input {
  flex: 1;
}
.el-tree .el-input.groupInput{
  flex: none;
  width: 84%;
  margin-left: auto;
}
.el-tree .custom-tree-node .el-input:nth-child(3){
  width: 46%;
  margin-right: 5%;
  flex: inherit;
}

.el-tree .custom-tree-node .el-input:nth-child(4){
  width: 15%;
  margin-right: 4%;
  flex: inherit;
}

.el-tree .drawerAdd {
  width: 100%;
  position: absolute;
  bottom: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f7fa;
}
.el-tree .drawerAdd > svg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #909aaa;
  margin-left: 10%;
  cursor: pointer;
}

.el-tree >>> .el-tree-node:focus > .el-tree-node__content,
.el-tree >>> .el-tree-node > .el-tree-node__content:hover {
  background-color: #fff;
}

::v-deep .el-tree > .el-tree-node > .el-tree-node__children {
  padding-bottom: 40px;
}
/* 树状结构样式 end */
</style>